<template>
    <div class="game-detail">
        <div class="game-basic">
            <div class="intro-pic">
                <img :src="attchFirstPic(game.gid)">
            </div>
            <div class="intro-content">
                <span>{{ game.name }}</span>
                <span>{{ "发行社：" + game.publisher }}</span>
                <span>{{ "发行日期：" + formatDate(game.date) }}</span>
            </div>
        </div>

        <div class="game-info">
            <div class="game-intro">
                <span>{{ "游戏简介" }}</span>
                <p>{{ game.content }}</p>
            </div>
            <div class="game-pic">
                <span>{{ "游戏截图" }}</span>
                <el-image
                class="el-image"
                style="width: 100%;"
                :src="attchFile(game.gid,picList.pic1)"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="0"
                fit="cover"
                />
                <el-image
                style="width: 100%;"
                :src="attchFile(game.gid,picList.pic2)"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="1"
                fit="cover"
                />
                <el-image
                style="width: 100%;"
                :src="attchFile(game.gid,picList.pic3)"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="2"
                fit="cover"
                />
            </div>

            <div class="game-video">
                <span>{{ "视频鉴赏" }}</span>
                <div class="video-play">
                    <GalVideo :gid="game.gid" :resource="videoname" :sendedDanmu="sendedDanmu"></GalVideo>
                    <ul>
                        <li  @click="setSupport" :style="{color:isSupport ? 'pink' : ''}">
                            <gIcon :icon="iconList.support"></gIcon>
                        </li>
                        <li  @click="setCollection" :style="{color:isCollection ? 'pink' : ''}" >
                            <gIcon :icon="iconList.collection"></gIcon>
                        </li>
                        <input class="danmu-enter" placeholder="发发你的" v-model="danmuWord">
                        <button @click="sendDanmu">{{ "发送" }}</button>
                    </ul>
              </div>
            </div>
        </div>

        <div class="game-comment">
            <span style="color: burlywood;
            font-weight: 550;
            font-size:larger;
            margin-top: 20px;">{{ "评论" }}</span>
            <div class="comment-input">
                <div class="user-info">
                    <img :src="attchAvatar(user.avatar)">
                    <span>{{ user.name }}</span>
                </div>
                <div class="word-input">
                    <textarea ref="textinput" placeholder="求求你给个评论吧！" v-model="inputword"></textarea>
                </div>
            </div>
            <div class="comment-list">
                <ul>
                    <li v-for="item in commentList">
                        <div class="border"></div>
                        <div class="ever-com">
                            <img :src="attchAvatar(item.avatar)">
                            <div class="comment-content" style="display: inline;">
                                <span style="display: inline;">{{ item.name }}</span>
                                 <gIcon :icon="iconList.delete" style="display: inline;padding-left: 500px;" class="deleteIcon" @click="deleteComment(item.tid)"></gIcon>
                                 <p style="margin: 5px 0;">{{ item.content }}</p>
                                <p>{{ formatDate(item.data) }}</p>
                        </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { HttpRequest } from '@/request/request';
import GalVideo from '@/components/GalVideo.vue';
import {icons} from '../assets/icons/icon'
import gIcon from '@/components/gIcon.vue';
import { userInfo } from '@/stores/user';


export default defineComponent({
    components:{
        GalVideo,
        gIcon
    },
    setup(){
        onBeforeMount(()=>{
            getGameDetail();
            getCommentList();
        })
        const textarea = ref<HTMLElement>();
        onMounted(()=>{
            textarea.value = proxy?.$refs.textinput as HTMLElement;
            textarea.value.addEventListener('keydown',handleKeyDown)
        })
        const user = reactive({
            avatar:userInfo().avatar,
            name:userInfo().name,
            uid:userInfo().uid
        })
        const proxy = getCurrentInstance()?.proxy;
        const game = reactive({
            gid:new Number(proxy?.$route.params.gid).valueOf(),
            name:"",
            date:"",
            publisher:"",
            content:"",
        });
        const picList = reactive({
            pic1:"2.png",
            pic2:"3.png",
            pic3:"4.png"
        })
        const srcList = [
            HttpRequest.attchFile(game.gid,picList.pic1),
            HttpRequest.attchFile(game.gid,picList.pic2),
            HttpRequest.attchFile(game.gid,picList.pic3),
        ]
        const videoname = ref("op.webm");
        const danmuWord = ref("");
        const isCollection = ref(false);
        const isSupport = ref(false);
        const sendedDanmu = ref("");
        const iconList = {
            delete:icons.delete,
            support:icons.support,
            collection:icons.collection
        }
        const commentList = ref([]);
        const inputword = ref("");

        async function getGameDetail(){
            if(game.gid != null){
                const result = await HttpRequest.getGameDetail(game.gid) as responseBody;
            if(result.success){
                game.name = result.data.name;
                game.date = result.data.date;
                game.publisher = result.data.publisher;
                game.content = result.data.content;
            }
            else{
                (proxy as any).$message({
                message:result.msg,
                type:result.type
                })
            }
        }
        else{
            
                (proxy as any).$message({
                message:"页面异常，请退出重试",
                type:"warning"
                })
        }  
    }
    function formatDate(cellValue:string){
      const date = new Date(cellValue);
      return  date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
      
    }

    function setSupport(){

    }

    function setCollection(){

    }

    function sendDanmu(){
        if(danmuWord != undefined && danmuWord.value != ""){
            sendedDanmu.value = danmuWord.value;
            danmuWord.value = "";
        }
    }

    async function getCommentList() {
        const result = await HttpRequest.getCommentList(game.gid) as responseBody;
        if(result.success){
            commentList.value = result.data;
        }
    }

    async function handleKeyDown(event){
        if(event.key == "Enter"){
            event.preventDefault();
            if(user.uid== null){
                (proxy as any).$message({
                    message:"请先登录",
                    type:"warning"
                })
            }
            if(inputword.value != ""){
                const result = await HttpRequest.putComment(user.uid,inputword.value,game.gid) as responseBody;
                (proxy as any).$message({
                message:result.msg,
                type:result.type
                })
                if(result.success){
                    inputword.value = "";
                    getCommentList();
                }
            }
        }
    }

    async function deleteComment(tid:number){
        const result = await HttpRequest.deleteComment(tid) as responseBody;
        (proxy as any).$message({
        message:result.msg,
        type:result.type
        })
        if(result.success){
            getCommentList();
        }
    }

    

        return{
            formatDate,
            attchFirstPic:HttpRequest.attchFirstPic,
            game,
            picList,
            attchFile:HttpRequest.attchFile,
            srcList,
            videoname,
            setSupport,
            setCollection,
            isSupport,
            isCollection,
            danmuWord,
            sendDanmu,
            iconList,
            sendedDanmu,
            attchAvatar:HttpRequest.attchAvatar,
            user,
            commentList,
            inputword,
            deleteComment,
        }
    }
})
</script>

<style scoped>
.game-detail{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(215, 212, 212, 0.578);
    overflow: auto;
}
.game-basic{
    width: 50%;
    margin-top: 20px;
    box-shadow: 0 0 5px 1px rgba(94, 93, 93, 0.5);
    border-radius: 5px;
    padding-bottom: 20px;
    background-color: white;
    .intro-pic{
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        position: relative;
        
        img{
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            object-fit: fill;
            border-radius: 5px;
        }
    }
    .intro-content{
        margin-top: 20px;
        width: 100%;
        display: flex;
        span{
            margin: 0 15px;
        }
        span{
            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            font-weight: 550;
            color:coral;
            font-size: 18px;
        }
    }
}

.game-info{
    width: 50%;
    margin-top: 20px;
    box-shadow: 0 0 5px 1px rgba(94, 93, 93, 0.5);
    border-radius: 5px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    .game-intro{
        width: 95%;
        margin-top: 10px;
        span{
            color: burlywood;
            font-weight: 550;
            font-size:larger;
        }
        p{
            margin-top: 10px;
            font-family:'Courier New', Courier, monospace;
            font-weight: 950;
        }
    }

    .game-pic{
        margin-top: 10px;
        width: 95%;
        span{
            color: burlywood;
            font-weight: 550;
            font-size:larger;
        }
        .el-image{
            margin: 10px 0;
            img{
                border: 5px;
            }
        }
    }

    .game-video{
        margin-top: 20px;
        width: 95%;
        span{
            color: burlywood;
            font-weight: 550;
            font-size:larger;
        }
        .video-play{
            ul{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

    li{
        color: grey;
        width: fit-content;
        margin: 0 30px
    }

    li:hover{
        color: #33a3dc;
    }

    .icon{
        height: fit-content;
        cursor: pointer;
    }
    .danmu-enter{
        flex: 35%;
        border: none;
        outline: none;
        background-color: rgba(190, 189, 189, 0.5);
        padding: 0 10px;
        border-radius: 5px 0 0 5px;
    }
    button{
        flex: 5%;
        border: none;
        margin-right: 10px;
        background-color: pink;
        border-radius: 0 5px 5px 0;
        color: white;
    }
    button:hover{
        opacity: 0.6;
    }
        }
    }
}

.game-comment{
    width: 50%;
    margin-top: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 5px 1px rgba(94, 93, 93, 0.5);
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .comment-input{
        margin-top: 20px;
        width: 95%;
        display: flex;
        justify-content: center;
        .user-info{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                object-fit: fill;
            }
            span{
                margin-top: 10px;
                color: rgba(71, 70, 70, 0.599);
                font-weight: 550;
            }
        }
        .word-input{
            flex: 0.85;
            margin-left: 20px;
            textarea{
                width: 100%;
                height: 100%;
                border: none;
                resize: none;
                font-size: 16px;
                border-radius: 5px;
                background-color: rgba(240, 237, 237, 0.5);;
            }
            textarea:focus {
                outline: 1px solid rgba(190, 189, 189, 0.5);
                background-color: white;
                
        }
        }
    }



    .comment-list{
        width: 85%;
        margin-top: 30px;
        ul{
            width: 100%;
            li{
                display: flex;
                flex-direction: column;
                margin: 10px 10px;
                .border{
                    width: 100%;
                    height: 1px;
                    background-color: rgba(190, 189, 189, 0.5);
                    margin: 10px 0;
                }
                .ever-com{
                    display: flex;
                    align-items: center;
                    img{
                    width: 55px;
                    height: 55px;
                    border-radius: 50%;
                    object-fit:fill;
                }
                .comment-content{
                    display: flex;
                    flex-direction: column;
                    margin-left: 30px;
                    span{
                        font-size: 18px;
                        font-weight: 550;
                    }
                    p{
                        font-size: 14px;
                    }
                }

                }
            
            }
        }
    }
}

</style>